import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_study_app/module/statistics/page/recommend_statistics_page.dart';
import 'package:flutter_study_app/module/statistics/widget/common_sliver_header_delegate.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_study_app/module/statistics/widget/my_underline_tab_indicator.dart';
import 'package:flutter_study_app/module/statistics/widget/sticky_tab_bar_delegate.dart';
import 'package:flutter_study_app/widget/arrow.dart';

class CrossRecommendStatisticsPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CrossRecommendStatisticsState();
}

class _CrossRecommendStatisticsState extends State<CrossRecommendStatisticsPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return ExtendedNestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverPersistentHeader(
              delegate: CommonSliverHeaderDelegate(
                  isLucency: true,
                  child: PreferredSize(
                    preferredSize: Size.fromHeight(180.w),
                    child: Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          colors: [
                            Color(0xFF4277ED),
                            Color(0xFF6392FA),
                          ],
                        ),
                      ),
                      child: Column(
                        children: [
                          Container(
                            height: 40.w,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Spacer(),
                                InkWell(
                                  onTap: () {},
                                  child: Padding(
                                    padding: EdgeInsets.symmetric(
                                        horizontal: 12.w, vertical: 3.w),
                                    child: Container(
                                      width: 10.w,
                                      height: 10.w,
                                      child: CustomPaint(
                                        painter: Arrow(),
                                      ),
                                    ),
                                  ),
                                ),
                                Text(
                                  '2021年09月',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 16.sp),
                                ),
                                InkWell(
                                  onTap: () {},
                                  child: Padding(
                                    padding: EdgeInsets.symmetric(
                                        horizontal: 12.w, vertical: 3.w),
                                    child: Container(
                                      width: 10.w,
                                      height: 10.w,
                                      child: CustomPaint(
                                        painter: Arrow(
                                            direction: ArrowDirection.RIGHT),
                                      ),
                                    ),
                                  ),
                                ),
                                Spacer(),
                              ],
                            ),
                          ),
                          Stack(
                            children: [
                              Container(
                                margin:
                                    EdgeInsets.only(left: 10.w, right: 10.w),
                                child:
                                    Image.asset('assets/images/bg_top_1.png'),
                              ),
                              Container(
                                padding: EdgeInsets.all(10.w),
                                margin: EdgeInsets.only(
                                    top: 12.w, left: 20.w, right: 20.w),
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(4),
                                    )),
                                child: Column(
                                  children: [
                                    Container(
                                      margin: EdgeInsets.only(top: 5.w),
                                      child: Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.end,
                                        children: [
                                          Expanded(
                                              child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Text(
                                                '引荐数 (户)',
                                                style: TextStyle(
                                                    fontSize: 14.sp,
                                                    color: Color(0xFF333333)),
                                              ),
                                              SizedBox(
                                                height: 2.w,
                                              ),
                                              Text(
                                                '3501',
                                                style: TextStyle(
                                                    fontSize: 16.sp,
                                                    color: Color(0xFF333333),
                                                    fontWeight:
                                                        FontWeight.bold),
                                              ),
                                              SizedBox(
                                                height: 5.w,
                                              ),
                                              Row(
                                                children: [
                                                  Text(
                                                    '+1344',
                                                    style: TextStyle(
                                                        fontSize: 12.sp,
                                                        color:
                                                            Color(0xFFF1622A)),
                                                  ),
                                                  SizedBox(
                                                    width: 12.w,
                                                  ),
                                                  Text(
                                                    '+300%',
                                                    style: TextStyle(
                                                        fontSize: 12.sp,
                                                        color:
                                                            Color(0xFFF1622A)),
                                                  ),
                                                ],
                                              )
                                            ],
                                          )),
                                          Container(
                                            width: 1.w,
                                            height: 30.w,
                                            color: Color(0xFFDDDDDD),
                                            margin:
                                                EdgeInsets.only(right: 12.w),
                                          ),
                                          Expanded(
                                              child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Text(
                                                '引荐受理 (户)',
                                                style: TextStyle(
                                                    fontSize: 14.sp,
                                                    color: Color(0xFF333333)),
                                              ),
                                              SizedBox(
                                                height: 2.w,
                                              ),
                                              Text(
                                                '120',
                                                style: TextStyle(
                                                    fontSize: 16.sp,
                                                    color: Color(0xFF333333),
                                                    fontWeight:
                                                        FontWeight.bold),
                                              ),
                                              SizedBox(
                                                height: 5.w,
                                              ),
                                              Row(
                                                children: [
                                                  Text(
                                                    '+64',
                                                    style: TextStyle(
                                                        fontSize: 12.sp,
                                                        color:
                                                            Color(0xFFF1622A)),
                                                  ),
                                                  SizedBox(
                                                    width: 12.w,
                                                  ),
                                                  Text(
                                                    '+12%',
                                                    style: TextStyle(
                                                        fontSize: 12.sp,
                                                        color:
                                                            Color(0xFFF1622A)),
                                                  ),
                                                ],
                                              )
                                            ],
                                          )),
                                          Container(
                                            width: 1.w,
                                            height: 30.w,
                                            color: Color(0xFFDDDDDD),
                                            margin:
                                                EdgeInsets.only(right: 12.w),
                                          ),
                                          Expanded(
                                              child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Text(
                                                '引荐成功 (户)',
                                                style: TextStyle(
                                                    fontSize: 14.sp,
                                                    color: Color(0xFF333333)),
                                              ),
                                              SizedBox(
                                                height: 2.w,
                                              ),
                                              Text(
                                                '3501',
                                                style: TextStyle(
                                                    fontSize: 16.sp,
                                                    color: Color(0xFF333333),
                                                    fontWeight:
                                                        FontWeight.bold),
                                              ),
                                              SizedBox(
                                                height: 5.w,
                                              ),
                                              Row(
                                                children: [
                                                  Text(
                                                    '+1344',
                                                    style: TextStyle(
                                                        fontSize: 12.sp,
                                                        color:
                                                            Color(0xFFF1622A)),
                                                  ),
                                                  SizedBox(
                                                    width: 12.w,
                                                  ),
                                                  Text(
                                                    '+1344',
                                                    style: TextStyle(
                                                        fontSize: 12.sp,
                                                        color:
                                                            Color(0xFFF1622A)),
                                                  ),
                                                ],
                                              )
                                            ],
                                          )),
                                        ],
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.topLeft,
                                      margin: EdgeInsets.only(top: 12.w),
                                      child: Text(
                                        '*百分比值是与上月环比结果。',
                                        style: TextStyle(
                                            fontSize: 11.sp,
                                            color: Color(0xff999999),
                                            fontWeight: FontWeight.w300),
                                        textAlign: TextAlign.left,
                                      ),
                                    ),
                                  ],
                                ),
                              )
                            ],
                          )
                        ],
                      ),
                    ),
                  ))),
          SliverPersistentHeader(
              pinned: true,
              floating: true,
              delegate: StickyTabBarDelegate(
                child: TabBar(
                  controller: _tabController,
                  labelColor: Color(0xff009669),
                  labelStyle: TextStyle(fontSize: 14.sp),
                  unselectedLabelColor: Color(0xff333333),
                  unselectedLabelStyle: TextStyle(fontSize: 14.sp),
                  indicator: MyUnderlineTabIndicator(
                      borderSide:
                          BorderSide(width: 2.w, color: Color(0xff009669)),
                      needWidth: 60.w),
                  tabs: [
                    Tab(text: '分行统计'),
                    Tab(text: '支行统计'),
                    Tab(text: '员工统计'),
                  ],
                ),
              ))
        ];
      },
      pinnedHeaderSliverHeightBuilder: () {
        return statusBarHeight + 45.w;
      },
      onlyOneScrollInBody: false,
      body: SafeArea(
        child: TabBarView(
          controller: _tabController,
          children: [
            RecommendStatisticsPage(),
            Center(
              child: Text('Page02'),
            ),
            Center(
              child: Text('Page03'),
            )
          ],
        ),
      ),
    );
  }
}
